<template>
  <div class="report-save-share">
    <!-- 报告列表 -->
    <div class="report-list-section">
      <!-- <div class="section-header">
        <i class="el-icon-document"></i>
        <span>调查报告列表</span>
      </div> -->
      
      <div class="report-list">
        <div 
          v-for="report in reports" 
          :key="report.id"
          class="report-card"
          :class="{ active: currentReport && currentReport.id === report.id }"
          @click="selectReport(report)"
        >
          <div class="card-header">
            <span class="report-title">{{ report.title }}</span>
            <el-tag :type="getPriorityType(report.priority)" size="mini">
              {{ report.priority }}
            </el-tag>
          </div>
          <div class="card-body">
            <div class="card-info">
              <i class="el-icon-document-copy"></i>
              <span>{{ report.caseInfo }}</span>
            </div>
            <div class="card-info">
              <i class="el-icon-user"></i>
              <span>{{ report.investigator }}</span>
            </div>
            <div class="card-info">
              <i class="el-icon-time"></i>
              <span>{{ report.investigateTime }}</span>
            </div>
            <div class="card-info">
              <i class="el-icon-location"></i>
              <span>{{ report.location }}</span>
            </div>
          </div>
          <div class="card-footer">
            <el-tag :type="getStatusType(report.status)" size="mini">
              {{ report.status }}
            </el-tag>
            <div class="card-stats">
              <span><i class="el-icon-share"></i> 分享{{ report.shareCount }}次</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 报告详情 -->
    <div v-if="currentReport" class="report-detail-section">
      <div class="section-title">
        <i class="el-icon-tickets"></i>
        <span>报告详情</span>
      </div>
      
      <div class="detail-content">
        <div class="detail-item">
          <span class="label">报告编号：</span>
          <span class="value">{{ currentReport.id }}</span>
        </div>
        <div class="detail-item">
          <span class="label">报告标题：</span>
          <span class="value">{{ currentReport.title }}</span>
        </div>
        <div class="detail-item">
          <span class="label">病例信息：</span>
          <span class="value">{{ currentReport.caseInfo }}</span>
        </div>
        <div class="detail-item">
          <span class="label">调查人员：</span>
          <span class="value">{{ currentReport.investigator }}</span>
        </div>
        <div class="detail-item">
          <span class="label">调查时间：</span>
          <span class="value">{{ currentReport.investigateTime }}</span>
        </div>
        <div class="detail-item">
          <span class="label">调查地点：</span>
          <span class="value">{{ currentReport.location }}</span>
        </div>
        <div class="detail-item">
          <span class="label">风险等级：</span>
          <el-tag :type="getRiskLevelType(currentReport.riskLevel)" size="small">
            {{ currentReport.riskLevel }}
          </el-tag>
        </div>
        <div class="detail-item full-width">
          <span class="label">调查摘要：</span>
          <div class="summary">{{ currentReport.summary }}</div>
        </div>
        <div class="detail-item full-width">
          <span class="label">处置措施：</span>
          <div class="measures">
            <div 
              v-for="(measure, index) in currentReport.measures" 
              :key="index"
              class="measure-item"
            >
              <i class="el-icon-circle-check"></i>
              <span>{{ measure }}</span>
            </div>
          </div>
        </div>
        <div class="detail-item">
          <span class="label">接触者总数：</span>
          <span class="value highlight">{{ currentReport.contactCount }}人</span>
        </div>
        <div class="detail-item">
          <span class="label">密切接触者：</span>
          <span class="value highlight">{{ currentReport.closeContactCount }}人</span>
        </div>
      </div>
    </div>

    <!-- 分享方式选择 -->
    <div v-if="currentReport" class="share-method-section">
      <div class="section-title">
        <i class="el-icon-share"></i>
        <span>分享报告</span>
      </div>
      <div class="share-methods">
        <div 
          v-for="method in shareMethods" 
          :key="method.type"
          class="share-method-card"
          @click="handleShare(method.type)"
        >
          <div class="method-icon" :style="{ backgroundColor: method.color }">
            <i :class="method.icon"></i>
          </div>
          <div class="method-name">{{ method.name }}</div>
          <div class="method-desc">{{ method.description }}</div>
        </div>
      </div>
    </div>

    <!-- 分享历史 -->
    <div class="share-history-section">
      <div class="section-title">
        <i class="el-icon-document-copy"></i>
        <span>分享历史记录</span>
      </div>
      <div class="history-list">
        <div 
          v-for="record in shareHistory" 
          :key="record.id"
          class="history-item"
        >
          <div class="history-icon" :style="{ backgroundColor: getMethodColor(record.method) }">
            <i :class="getMethodIcon(record.method)"></i>
          </div>
          <div class="history-info">
            <div class="history-title">{{ record.reportTitle }}</div>
            <div class="history-detail">
              <span class="method-name">{{ getMethodName(record.method) }}</span>
              <span class="separator">·</span>
              <span class="share-time">{{ record.shareTime }}</span>
            </div>
            <div class="history-recipients">
              <span class="label">接收人：</span>
              <span class="recipients">{{ record.recipients.join('、') }}</span>
            </div>
          </div>
          <div class="history-status">
            <el-tag :type="record.status === '已送达' ? 'success' : 'info'" size="mini">
              {{ record.status }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div v-if="currentReport" class="action-buttons">
      <el-button 
        type="primary" 
        size="large"
        icon="el-icon-folder-checked"
        @click="handleSaveReport"
      >
        保存报告
      </el-button>
    </div>

    <!-- 分享链接对话框 -->
    <el-dialog
      title="分享链接"
      :visible.sync="showLinkDialog"
      width="90%"
      center
      :close-on-click-modal="false"
      custom-class="share-dialog"
    >
      <div class="share-link-content">
        <div class="link-info">
          <i class="el-icon-link"></i>
          <span>链接有效期：7天</span>
        </div>
        <div class="link-box">
          <input 
            ref="linkInput"
            v-model="shareLink" 
            readonly 
            class="link-input"
          />
          <el-button 
            type="primary" 
            size="small"
            @click="copyLink"
          >
            复制
          </el-button>
        </div>
        <div class="qr-code">
          <div class="qr-placeholder">
            <i class="el-icon-picture"></i>
            <p>二维码</p>
          </div>
          <div class="qr-tip">扫描二维码快速访问</div>
        </div>
      </div>
    </el-dialog>

    <!-- 文本分享对话框 -->
    <el-dialog
      title="分享文本内容"
      :visible.sync="showTextDialog"
      width="90%"
      center
      :close-on-click-modal="false"
      custom-class="share-dialog"
    >
      <div class="share-text-content">
        <el-input
          v-model="shareText"
          type="textarea"
          :rows="10"
          readonly
          class="text-area"
        ></el-input>
        <div class="text-actions">
          <el-button 
            type="primary" 
            @click="copyText"
            style="flex: 1;"
          >
            复制文本
          </el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 邮件分享对话框 -->
    <el-dialog
      title="邮件分享"
      :visible.sync="showEmailDialog"
      width="90%"
      center
      :close-on-click-modal="false"
      custom-class="share-dialog"
    >
      <div class="share-email-content">
        <div class="email-form">
          <div class="form-item">
            <label>收件人邮箱：</label>
            <el-input
              v-model="emailForm.to"
              placeholder="请输入收件人邮箱，多个用逗号分隔"
              clearable
            ></el-input>
          </div>
          <div class="form-item">
            <label>邮件主题：</label>
            <el-input
              v-model="emailForm.subject"
              placeholder="请输入邮件主题"
              clearable
            ></el-input>
          </div>
          <div class="form-item">
            <label>附加说明：</label>
            <el-input
              v-model="emailForm.message"
              type="textarea"
              :rows="3"
              placeholder="可选填写附加说明信息"
            ></el-input>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showEmailDialog = false">取消</el-button>
        <el-button type="primary" @click="sendEmail">发送邮件</el-button>
      </div>
    </el-dialog>

    <!-- 团队成员分享对话框 -->
    <el-dialog
      title="分享给团队成员"
      :visible.sync="showTeamDialog"
      width="90%"
      center
      :close-on-click-modal="false"
      custom-class="share-dialog"
    >
      <div class="share-team-content">
        <div class="team-search">
          <el-input
            v-model="teamSearchKeyword"
            placeholder="搜索团队成员"
            prefix-icon="el-icon-search"
            clearable
          ></el-input>
        </div>
        <div class="team-list">
          <div 
            v-for="member in filteredTeamMembers" 
            :key="member.id"
            class="team-member"
          >
            <div class="member-info" @click="toggleMember(member.id)">
              <div class="member-avatar" :style="{ backgroundColor: member.color }">
                {{ member.name.charAt(0) }}
              </div>
              <div class="member-detail">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-role">{{ member.role }} · {{ member.department }}</div>
              </div>
            </div>
            <el-checkbox 
              v-model="member.selected"
            ></el-checkbox>
          </div>
        </div>
        <div class="selected-summary">
          已选择 {{ selectedMembersCount }} 人
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTeamDialog = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="shareToTeam"
          :disabled="selectedMembersCount === 0"
        >
          确认分享
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { 
  getInvestigationReports,
  saveReport,
  generateShareLink,
  generateShareText,
  sendEmailShare,
  shareToTeamMembers,
  getTeamMembers,
  getShareHistory
} from './service';

export default {
  name: 'ReportSaveShare',

  data() {
    return {
      reports: [],
      currentReport: null,
      
      // 分享方式
      shareMethods: [
        {
          type: 'link',
          name: '链接分享',
          description: '生成分享链接',
          icon: 'el-icon-link',
          color: '#409EFF'
        },
        {
          type: 'text',
          name: '文本分享',
          description: '复制文本内容',
          icon: 'el-icon-document',
          color: '#67C23A'
        },
        {
          type: 'email',
          name: '邮件分享',
          description: '通过邮件发送',
          icon: 'el-icon-message',
          color: '#E6A23C'
        },
        {
          type: 'team',
          name: '团队分享',
          description: '分享给团队成员',
          icon: 'el-icon-user',
          color: '#F56C6C'
        }
      ],

      // 分享历史
      shareHistory: [],

      // 对话框控制
      showLinkDialog: false,
      showTextDialog: false,
      showEmailDialog: false,
      showTeamDialog: false,

      // 分享数据
      shareLink: '',
      shareText: '',
      emailForm: {
        to: '',
        subject: '',
        message: ''
      },

      // 团队成员
      teamMembers: [],
      teamSearchKeyword: ''
    };
  },

  computed: {
    filteredTeamMembers() {
      if (!this.teamSearchKeyword) {
        return this.teamMembers;
      }
      const keyword = this.teamSearchKeyword.toLowerCase();
      return this.teamMembers.filter(member => 
        member.name.toLowerCase().includes(keyword) ||
        member.role.toLowerCase().includes(keyword) ||
        member.department.toLowerCase().includes(keyword)
      );
    },

    selectedMembersCount() {
      return this.teamMembers.filter(m => m.selected).length;
    }
  },

  methods: {
    // 获取优先级标签类型
    getPriorityType(priority) {
      const typeMap = {
        '高': 'danger',
        '中': 'warning',
        '低': 'info'
      };
      return typeMap[priority] || 'info';
    },

    // 获取状态标签类型
    getStatusType(status) {
      const typeMap = {
        '已完成': 'success',
        '进行中': 'warning',
        '待处理': 'info'
      };
      return typeMap[status] || 'info';
    },

    // 获取风险等级标签类型
    getRiskLevelType(level) {
      const typeMap = {
        '高风险': 'danger',
        '中风险': 'warning',
        '低风险': 'success'
      };
      return typeMap[level] || 'info';
    },

    // 选择报告
    selectReport(report) {
      this.currentReport = report;
      //this.showToast('已选择报告');
    },

    // 保存报告
    handleSaveReport() {
      this.$msgbox({
        title: '温馨提示',
        message: '确认保存当前调查报告吗？保存后可在系统中查询和分享',
        showCancelButton: true,
        confirmButtonText: '确认保存',
        cancelButtonText: '取消',
        customClass: 'mobile-confirm-dialog',
        confirmButtonClass: 'mobile-confirm-btn',
        cancelButtonClass: 'mobile-cancel-btn',
        center: true,
        closeOnClickModal: false
      }).then(() => {
        const loading = this.$loading({
          lock: true,
          text: '保存中...',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        saveReport(this.currentReport).then((res) => {
          loading.close();
          this.$notify({
            title: '✅ 保存成功',
            message: '调查报告已成功保存',
            type: 'success',
            duration: 2500,
            position: 'top-right',
            offset: 60
          });
        }).catch(error => {
          loading.close();
          this.showToast(error.message || '保存失败', 'error');
        });
      }).catch(() => {});
    },

    // 处理分享
    handleShare(type) {
      if (!this.currentReport) {
        this.showToast('请先选择要分享的报告', 'warning');
        return;
      }

      switch (type) {
        case 'link':
          this.shareLinkMethod();
          break;
        case 'text':
          this.shareTextMethod();
          break;
        case 'email':
          this.shareEmailMethod();
          break;
        case 'team':
          this.shareTeamMethod();
          break;
      }
    },

    // 链接分享
    shareLinkMethod() {
      const loading = this.$loading({
        lock: true,
        text: '生成分享链接中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      generateShareLink(this.currentReport.id).then(link => {
        loading.close();
        this.shareLink = link;
        this.showLinkDialog = true;
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '生成链接失败', 'error');
      });
    },

    // 复制链接
    copyLink() {
      this.$refs.linkInput.select();
      document.execCommand('copy');
      this.showToast('链接已复制到剪贴板');
    },

    // 文本分享
    shareTextMethod() {
      const loading = this.$loading({
        lock: true,
        text: '生成分享文本中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      generateShareText(this.currentReport).then(text => {
        loading.close();
        this.shareText = text;
        this.showTextDialog = true;
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '生成文本失败', 'error');
      });
    },

    // 复制文本
    copyText() {
      const textarea = document.querySelector('.text-area textarea');
      textarea.select();
      document.execCommand('copy');
      this.showToast('文本已复制到剪贴板');
    },

    // 邮件分享
    shareEmailMethod() {
      this.emailForm = {
        to: '',
        subject: `【流调报告】${this.currentReport.title}`,
        message: ''
      };
      this.showEmailDialog = true;
    },

    // 发送邮件
    sendEmail() {
      if (!this.emailForm.to) {
        this.showToast('请输入收件人邮箱', 'warning');
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: '发送邮件中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const data = {
        report: this.currentReport,
        ...this.emailForm
      };

      sendEmailShare(data).then(() => {
        loading.close();
        this.showEmailDialog = false;
        this.showToast('邮件发送成功', 'success');
        this.loadShareHistory();
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '邮件发送失败', 'error');
      });
    },

    // 团队分享
    shareTeamMethod() {
      const loading = this.$loading({
        lock: true,
        text: '加载团队成员...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      getTeamMembers().then(members => {
        loading.close();
        this.teamMembers = members.map(m => ({
          ...m,
          selected: false
        }));
        this.showTeamDialog = true;
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '加载团队成员失败', 'error');
      });
    },

    // 切换成员选择
    toggleMember(memberId) {
      const member = this.teamMembers.find(m => m.id === memberId);
      if (member) {
        member.selected = !member.selected;
      }
    },

    // 分享给团队
    shareToTeam() {
      const selectedMembers = this.teamMembers.filter(m => m.selected);
      
      if (selectedMembers.length === 0) {
        this.showToast('请选择至少一位团队成员', 'warning');
        return;
      }

      const loading = this.$loading({
        lock: true,
        text: '分享中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      const data = {
        report: this.currentReport,
        members: selectedMembers
      };

      shareToTeamMembers(data).then(() => {
        loading.close();
        this.showTeamDialog = false;
        this.showToast(`已成功分享给 ${selectedMembers.length} 位成员`, 'success');
        this.loadShareHistory();
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '分享失败', 'error');
      });
    },

    // 获取分享方式颜色
    getMethodColor(method) {
      const colorMap = {
        'link': '#409EFF',
        'text': '#67C23A',
        'email': '#E6A23C',
        'team': '#F56C6C'
      };
      return colorMap[method] || '#909399';
    },

    // 获取分享方式图标
    getMethodIcon(method) {
      const iconMap = {
        'link': 'el-icon-link',
        'text': 'el-icon-document',
        'email': 'el-icon-message',
        'team': 'el-icon-user'
      };
      return iconMap[method] || 'el-icon-share';
    },

    // 获取分享方式名称
    getMethodName(method) {
      const nameMap = {
        'link': '链接分享',
        'text': '文本分享',
        'email': '邮件分享',
        'team': '团队分享'
      };
      return nameMap[method] || '未知方式';
    },

    // Toast提示
    showToast(message, type = 'success') {
      this.$notify({
        title: '',
        message: message,
        type: type,
        duration: 2000,
        position: 'top-right',
        offset: 60
      });
    },

    // 加载报告列表
    loadReports() {
      const loading = this.$loading({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      getInvestigationReports().then(data => {
        this.reports = data;
        if (data.length > 0) {
          this.currentReport = data[0];
        }
        loading.close();
      }).catch(error => {
        loading.close();
        this.showToast(error.message || '加载失败', 'error');
      });
    },

    // 加载分享历史
    loadShareHistory() {
      getShareHistory().then(data => {
        this.shareHistory = data;
      }).catch(error => {
        console.error('加载分享历史失败', error);
      });
    }
  },

  mounted() {
    this.loadReports();
    this.loadShareHistory();
  }
};
</script>

<style scoped>
.report-save-share {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 报告列表 */
.report-list-section {
  background: white;
  margin-bottom: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 15px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
}

.section-header i {
  font-size: 20px;
  margin-right: 8px;
}

.report-list {
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 400px;
  overflow-y: auto;
}

.report-card {
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.report-card.active {
  background: #e7f4ff;
  border-color: #409EFF;
}

.report-card:active {
  transform: scale(0.98);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.report-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 8px;
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.card-info {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #666;
}

.card-info i {
  margin-right: 5px;
  font-size: 14px;
  color: #409EFF;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #e4e7ed;
}

.card-stats {
  font-size: 12px;
  color: #999;
}

.card-stats i {
  margin-right: 3px;
}

/* 报告详情 */
.report-detail-section {
  background: white;
  margin-bottom: 10px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.section-title i {
  font-size: 18px;
  margin-right: 6px;
  color: #409EFF;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
}

.detail-item.full-width {
  flex-direction: column;
}

.detail-item .label {
  color: #666;
  min-width: 90px;
  flex-shrink: 0;
}

.detail-item .value {
  color: #333;
  flex: 1;
  word-break: break-all;
}

.detail-item .value.highlight {
  color: #409EFF;
  font-weight: 600;
}

.summary {
  color: #333;
  line-height: 1.6;
  margin-top: 5px;
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
}

.measures {
  margin-top: 5px;
}

.measure-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  color: #333;
}

.measure-item i {
  color: #67C23A;
  margin-right: 8px;
  font-size: 16px;
}

/* 分享方式选择 */
.share-method-section {
  background: white;
  margin-bottom: 10px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.share-methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.share-method-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.share-method-card:active {
  transform: scale(0.95);
  border-color: #409EFF;
}

.method-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.method-icon i {
  font-size: 24px;
  color: white;
}

.method-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.method-desc {
  font-size: 12px;
  color: #999;
}

/* 分享历史 */
.share-history-section {
  background: white;
  margin-bottom: 10px;
  padding: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
}

.history-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12px;
}

.history-icon i {
  font-size: 20px;
  color: white;
}

.history-info {
  flex: 1;
  min-width: 0;
}

.history-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-detail {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}

.separator {
  margin: 0 5px;
}

.history-recipients {
  font-size: 12px;
  color: #666;
}

.history-recipients .label {
  color: #999;
}

.history-status {
  margin-left: 10px;
  flex-shrink: 0;
}

/* 操作按钮 */
.action-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  border-top: 1px solid #f0f0f0;
}

.action-buttons .el-button {
  width: 100%;
  border-radius: 6px;
  font-size: 15px;
  height: 46px;
  font-weight: 500;
}

/* 对话框样式 */
.share-link-content {
  padding: 10px 0;
}

.link-info {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 13px;
  margin-bottom: 15px;
}

.link-info i {
  margin-right: 5px;
  color: #409EFF;
}

.link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.link-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 13px;
  color: #606266;
  background: #f5f7fa;
}

.qr-code {
  text-align: center;
}

.qr-placeholder {
  width: 180px;
  height: 180px;
  margin: 0 auto 10px;
  background: #f5f7fa;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed #dcdfe6;
}

.qr-placeholder i {
  font-size: 48px;
  color: #c0c4cc;
  margin-bottom: 10px;
}

.qr-placeholder p {
  color: #909399;
  font-size: 14px;
  margin: 0;
}

.qr-tip {
  font-size: 12px;
  color: #999;
}

.share-text-content {
  padding: 10px 0;
}

.text-area >>> textarea {
  font-size: 13px;
  line-height: 1.6;
  font-family: inherit;
}

.text-actions {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}

.share-email-content {
  padding: 10px 0;
}

.email-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-item {
  display: flex;
  flex-direction: column;
}

.form-item label {
  font-size: 13px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
}

.share-team-content {
  padding: 10px 0;
}

.team-search {
  margin-bottom: 15px;
}

.team-list {
  max-height: 400px;
  overflow-y: auto;
}

.team-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.3s;
}

.member-info {
  display: flex;
  align-items: center;
  flex: 1;
  cursor: pointer;
}

.member-info:active {
  opacity: 0.7;
}

.member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
}

.member-detail {
  flex: 1;
}

.member-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}

.member-role {
  font-size: 12px;
  color: #999;
}

.selected-summary {
  text-align: center;
  padding: 12px;
  background: #f0f9ff;
  color: #409EFF;
  font-size: 13px;
  border-radius: 4px;
  margin-top: 10px;
}

.dialog-footer {
  display: flex;
  gap: 10px;
  padding: 0;
}

.dialog-footer .el-button {
  flex: 1;
  margin: 0;
}
</style>

